<template>
  <div id="vchart-com">
    <div v-for="(chart,index) in curChartList" :key="index" :class="curChartList.length - 1 == index ? 'lastHeight':''">
      <div v-for="(item,index) in chart" :key="index">
        <p class="chart-legend"><span>{{item.title}}</span><cite :class="curLegendActive == index ? 'legendActive':''"></cite></p>
        <div class="column">
          <!-- 分组柱图 -->
          <!-- :settings="curSettingStack" -->
          <ve-histogram v-if="item.type=='histogram'" width="100%" height="100%" :judge-width="true" :colors="curColor" :data-zoom="curDataZoom" :data="item.data" :extend="curExtend"></ve-histogram>
          <!-- 堆叠柱图 -->
          <ve-histogram v-if="item.type=='histogramStack'" width="100%" height="100%" :judge-width="true" :colors="curColor" :data="item.data" :extend="curExtend" :settings="item.chartSettings"></ve-histogram>
          <!-- 折现柱图 -->
          <ve-histogram v-if="item.type=='histogramLine'" width="100%" height="100%" :judge-width="true" :colors="curColor" :data="item.data" :extend="curExtend" :settings="item.chartSettings"></ve-histogram>
          <!-- 折现图 -->
          <ve-line v-if="item.type=='line'" width="100%" height="100%" :judge-width="true" :colors="curColor" :data="item.data" :extend="curExtend"></ve-line>
          <!-- 饼图 -->
          <ve-pie v-if="item.type == 'pie'" width="100%" height="100%" :judge-width="true" :colors="curColor" :data="item.data"  :extend="curExtend" :settings="curSettingPie"></ve-pie>
          <!-- <ve-ring v-if="item.type=='ring'" :height="curHeight" :colors="curColor" :data="item.data"  :extend="curExtend" :settings="curSettingRing"></ve-ring> -->
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import _ from 'lodash'
export default {
  name:'vchart-com',
  computed: {
    curChartList(){
      return this.$store.getters['chart/curChartList']
    },
    curLegendActive(){
      return this.$store.state.chart.legendActive
    },
    curColor(){
      return this.$store.getters['chart/curChartOption'].colors
    },
    curDataZoom(){
      return this.$store.getters['chart/curChartOption'].dataZoom
    },
    curExtend(){
      return  this.$store.getters['chart/curChartOption'].extends
    },
    curSettingRing(){
      return  this.$store.getters['chart/curChartOption'].settings.ring
    },
    curBtnGroupActive(){
      return this.$store.getters.curBtnGroupActive
    },
    curDefaultMenu(){
      return this.$store.getters.defaultMenu
    },
    curSettingPie(){
      let rules = '';
      let row = this.curChartList.length;
      let column = '';
      this.curChartList.map((item)=>{
        column = item.length;
      })
      let rule = 'pie'+ row +'_' + column
      rules = this.$store.getters['chart/curChartOption'].settings.pie.rules[rule]
      return  rules
    },
    curSettingDoubleLoop(){
      return this.$store.getters['chart/curChartOption'].settings.doubleLoop
    },
    curSettingStack(){
      return 
      // let stackrule = 'bar'+ this.curDefaultMenu+'_' + this.curBtnGroupActive+"_1";
      // return this.$store.getters['chart/curChartOption'].settings.histogramStack.rules[stackrule]
    }
  }
  
}
</script>

<style lang="stylus" scoped>
#vchart-com
  width 100%
  height calc(100% - 120px)
  // ~~~~~~~~~~~~~竖向均匀分布
  display flex
  flex-direction column
  justify-content center
  // ~~~~~~~~~

#vchart-com > div
  // ~~~~~~~~~竖向撑满
  flex 1 
  // ~~~~~~~~~
  width 100%
  box-sizing border-box 
  background: linear-gradient(to right,rgba(62,73,103,0.7) , rgba(48,58,88,1))
  -webkit-box-shadow 8px 8px 8px rgba(0,0,0,0.5)
  box-shadow 8px 8px 8px rgba(0,0,0,0.5)
  margin-bottom 10px
  // ~~~~~~横向
  display flex
  flex-direction row
  align-items center

#vchart-com > div > div
// ~~~~~~横向
  flex 1
  height 100%

#vchart-com
  .lastHeight
    margin-bottom 25px

.chart-legend
  position relative
  // 解决多个图表标题问题
  height 30px
  line-height 30px
  margin-left 10px

.chart-legend span
  display inline-block
  font-size 16px
  color #fff

.chart-legend cite.legendActive
  position absolute
  left 0
  top 0
  width 5px
  height 30px
  background #13ffd7
  margin-left -10px

#vchart-com > div > div .column
  height calc(100% - 30px)

</style>
